	<template>
		<div>
			<div style="width: 100%; height: 10px;"></div>
			<span style="font-weight:bold;color:black">人物画像</span>
			<div style="width: 100%; height: 10px;"></div>
			<v-chart class="chart" :option="option" autoresize />
		</div>
	</template>


<script setup>
import { use } from 'echarts/core';
import { TitleComponent, LegendComponent } from 'echarts/components';
import { RadarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import { TooltipComponent } from 'echarts/components';
import { PieChart } from 'echarts/charts';
import { ref } from "vue";
import VChart from "vue-echarts";

const props = defineProps({
  StuId: String
});

use([
	TitleComponent,
	LegendComponent,
	RadarChart,
	CanvasRenderer,
	TooltipComponent,
	PieChart,
]);



//定义数据变量
var joinedCourseSetNum = 30;
var exitCourseSetNum = 4;
var exitCourseNum = 10;
var joinedCourseNum = 30;
var learnedSeconds = 101017;
var finishedTaskNum = 78;
var createdTime = 1638212404;
var updatedTime = 1640026804;
var score_average = 100;

//这部分到时候由后端计算返回，直接代入，不计算
var diversity = joinedCourseNum + joinedCourseSetNum;
var persistence = joinedCourseNum - exitCourseNum - exitCourseSetNum;
var hard_working = learnedSeconds / 3600;
var vitality = (updatedTime - createdTime) / (360 * 24 * 31);
var score_point = score_average;

const option = ref({
	// title: {
	// 	text: '人物画像',
	// 	textStyle: { color: 'black' }
	// },
	tooltip: {
		trigger: 'item',
	},
	legend: {
		top: '5%',
		left: 'center',
		textStyle: { color: 'black' }
	},
	series: [
		{
			name: 'STU_85604',
			type: 'pie',
			radius: ['40%', '70%'],
			center: ['50%', '70%'],
			// adjust the start and end angle
			startAngle: 180,
			endAngle: 360,
			minShowLabelAngle: 3,//小于3°不进行显示
			data: [
				{ value: (diversity), name: '多样性' },
				{ value: (persistence), name: '坚持力' },
				{ value: (persistence), name: '勤奋度' },
				{ value: (vitality), name: '活跃度' },
				{ value: (score_point), name: '能力值' }
			],
		}
	],
});
</script>

<style scoped>
.chart {
	width: 100%;
	height: 400px;
	/* 设置合适的高度 */
}
</style>